$themeColor: #00ccff;
$themeOpacityColor: rgba(0, 201, 255, .15);
$bg-color: rgba(14, 40, 47, .7);
$activeColor: #FFBC00;
$activeColor1: #00C0FF;
$borderColor: #4270A7;
$fontColor: #7896ED;
$fontColor1: #949BA5;
$viewBg: #0F2F55;

$suspectFire: #1A88F1;
$realFire: #FF4343;
$fakeFire: #43FF55;
$linkFire: #FFCC00;

$themeFontFamily: "SiYuan_Medium";

// 因为不是很清楚上面的变量的来历和用途，所以这里加个注释分隔，下面的变量是来自设计师的设计稿。
// 尽可能把用到的变量都放这里，然后命名好，加上注释说明一下是哪里的。
// 大多数时候都是记录颜色变量。就算是同一个颜色，在不同页面用，也可以考虑用不同变量名，这样某个部分改起来方便些。
// 注意变量也可以赋值给变量。

// 公用组件，这部分变量直接用在element-change.scss里，全局改变

// 一些组件公用的颜色
$el-common-label-text-color-1: white; // 各种checkbox、radio之类的文字颜色
$el-common-border-color: #3AECFF;
$el-common-border: 1px solid $el-common-border-color; // 大部分时候的边框
$el-common-bg: rgb(0, 63, 63); // 大部分时候的背景色
$el-common-bg-hover: rgba(39, 86, 80); //大部分时候的悬浮时背景色
$el-loading-bg-color-1: rgba(0, 63, 63, 0.8); // el的loading组件背景色
$el-btn-color: #3AECFF; // 按钮文字色，普通状态
$el-btn-active-color: black; // 按钮文字色，激活状态
$el-btn-bg-color: #112F2E; // 按钮背景色，普通状态
$el-btn-bg-active-color: #3AECFF; // 按钮背景色，激活状态

// 确认和取消按钮
$el-confirm-btn-bg-color: #3AECFF; // 确认按钮背景色
$el-confirm-btn-text-color: black; // 确认按钮文字色
$el-confirm-btn-border-color: #3AECFF; // 确认按钮边框色
$el-confirm-btn-border: 1px solid $el-confirm-btn-border-color; // 确认按钮边框
$el-cancel-btn-bg-color: #112F2E; // 取消按钮背景色
$el-cancel-btn-text-color: #3AECFF; // 取消按钮文字色
$el-cancel-btn-border-color: #3AECFF; // 取消按钮边框色
$el-cancel-btn-border: 1px solid $el-cancel-btn-border-color; // 取消按钮边框

// dialog之类弹窗组件的颜色
$el-common-dialog-bg-color: linear-gradient(180deg, #112F2E 0%, #031E1D 100%); // dialog之类的背景色
$el-common-dialog-border: 1px solid; // 边框
$el-common-dialog-border-image: linear-gradient(160deg, rgba(46, 189, 198, 1), rgba(40, 156, 163, 0)) 1 1; // 边框
$el-common-dialog-text-color: white; // 标题，关闭按钮等文字的颜色
$el-common-dialog-title-bottom-border: 1px solid rgba(164, 164, 164, 0.2); // dialog标题下的细分割线

// checkbox、radio的颜色，公用一套
$el-check-radio-border-color: #3AECFF; // 边框色
$el-check-radio-bg-color: #0B5958; // 未选中状态下的背景色
$el-check-radio-checked-bg-color: #3AECFF; // 选中状态下的背景色
$el-check-radio-checked-text-color: #333333; // 选中状态下勾和点的颜色

// el-date-picker
$el-date-picker-bg-color: #011D1D; // 输入框背景色
$el-date-picker-border-color: #3AECFF; // 边框颜色
$el-date-picker-popper-bg-color: #003F3F; // 弹窗框背景色
$el-date-picker-popper-range-bg-color: rgba(1, 32, 28, 0.37); // 已经被选中的背景色
$el-date-picker-popper-range-hover-bg-color: #02312a5e; // 悬浮时的背景色
$el-date-picker-popper-start-end-bg-color: #1d5e7c; // 被选中的日期的背景色

// el-form
$el-form-label-text-color: white; // label文字颜色

// el-input
$el-input-text-color: black; // 文字颜色
$el-input-bg-color: unset; // 背景色

// el-select
$el-select-text-color: white; // 文字色
$el-select-text-highlight-color: #3AECFF; // 高亮文字色
$el-select-bg-color: unset; // 本体背景色
$el-select-popper-bg-color: rgb(0, 63, 63); // 弹出框背景色
$el-select-popper-bg-hover-color: rgba(39, 86, 80); // 弹出框背景色，悬浮时
$el-select-popper-border-color: rgb(46, 189, 198); // 弹出框边框色

// 公用组件end

// 登录页
$login-title-text-color: white; // 标题颜色
$login-right-bg: linear-gradient(180deg, rgba(16, 52, 57, 0) 0%, #103439 52%, rgba(16, 52, 57, 0) 100%); // 右边背景
$login-right-border-image: linear-gradient(180deg, rgba(0, 255, 255, 0), rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0)) 2 2; // 右边border颜色
$login-btn-bg-color: #87F8E9; // 登录按钮背景色
$login-input-bg-color: linear-gradient(125deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%); // 输入框背景颜色
$login-input-border-image: radial-gradient(circle, rgba(0, 240, 255, 1), rgba(0, 209, 255, 0)) 2 2; // 输入框边框

// 页头(公用)
$header-text-color: white; // 页头的文字颜色
$header-icon-color: #87F8E9; // icon颜色

// 首页(统计页)
$home-panel-bg-color: linear-gradient(153deg, rgba(0, 63, 63, 0.5) 0%, rgba(0, 23, 23, 0.5) 100%); // panel背景色
$home-panel-title-text-color: white; // panel标题文字色
$home-panel-border-image: linear-gradient(160deg, rgba(46, 189, 198, 1), rgba(40, 156, 163, 0)) 1 1; // panel边框
$home-normal-border-color: rgba(46, 189, 198, 0.5); // 要border-radius的话，就用不了border-image，所以用一个固定色
$home-panel-title-border-image: linear-gradient(90deg, #3AECFF 0%, rgba(58, 236, 255, 0) 100%) 2 2; // panel标题边框
$home-panel-radio-text-color: #3AECFF; // 选择按钮的文字色
$home-panel-radio-bg-color: #233C42; // 选择按钮的背景色
$home-panel-radio-border-color: #3AECFF; // 选择按钮边框色
$home-panel-radio-text-active-color: black; // 选择按钮的文字色(选中后)
$home-panel-radio-bg-active-color: #3AECFF; // 选择按钮的背景色(选中后)
$home-panel-community-label-color: #3AECFF; // 社区列表，社区名字颜色
// 首页滚动列表
$home-scroll-list-warn-text-color: #FCAE3A; // 滚动列表，警告字样
$home-scroll-list-head-text-color: white; // 滚动列表，表头，字体颜色
$home-scroll-list-head-border-image: linear-gradient(90deg, #3AECFF 0%, rgba(58, 236, 255, 0) 100%) 2 2; // 表头底边框颜色
$home-scroll-list-highlight-text-color-1: #3AECFF; // 列表里有些文字高亮，这是第一种高亮色
$home-scroll-list-even-bg-color: rgba(39, 86, 80, 0.8); // 列表偶数行的背景颜色
$home-scroll-list-hover-bg-color: rgba(26, 136, 241, 0.5); // 指针悬浮时的背景颜色
// 进度条颜色
$home-progress-bar-color-1: #3AECFF; // 进度条颜色1

// 一张图页面
$one-map-case-type-text-color: #96FEF1; // 案件分类，文字色
$one-map-case-type-bg-color: linear-gradient(153deg, rgba(0, 63, 63, 0.5) 0%, rgba(0, 23, 23, 1) 100%); // 案件分类，背景色
$one-map-case-type-select-bg-color: linear-gradient(153deg, rgba(48, 154, 154, 0.5) 0%, rgba(17, 103, 115, 1) 100%); // 案件分类，选中状态背景色
$one-map-case-type-border-image: linear-gradient(160deg, rgba(46, 189, 198, 1), rgba(40, 156, 163, 0)) 1 1; // 边框
$one-map-case-type-label-text-color: white; // 说明文字的颜色

// 监控点组件
$monitor-text-color-1: #96FEF1; // 文字颜色1
$monitor-text-color-2: white; // 文字颜色2，说明文字
$monitor-text-color-3: black; // 文字颜色3，按钮
$monitor-btn-bg-color: #96FEF1; // 按钮背景色
$monitor-bg-color: linear-gradient(153deg, rgba(0, 63, 63, 0.5) 0%, rgba(0, 23, 23, 1) 100%); // 背景色
$monitor-select-bg-color: linear-gradient(153deg, rgba(48, 154, 154, 0.5) 0%, rgba(17, 103, 115, 1) 100%); // 选中，背景色
$monitor-border-image: linear-gradient(160deg, rgba(46, 189, 198, 1), rgba(40, 156, 163, 0)) 1 1; // 边框

// 地图指南针和缩放控件等
$map-widget-bg-color: rgba(15, 47, 85, 0.73); // 背景色
$map-widget-border-color: rgba(74, 179, 193, 0.64); // 边框

// 案件报告页面
$case-report-bg-color: linear-gradient(365deg, rgba(0, 63, 63, 0.8) 20%, rgba(0, 23, 23, 0.8) 100%); // 全部背景色
$case-report-border-image: linear-gradient(160deg, rgba(46, 189, 198, 1), rgba(40, 156, 163, 0)) 1 1; // 全部边框
$case-report-border-color: rgba(46, 189, 198, 0.5); // 要border-radius的话，就用不了border-image，所以用一个固定色
$case-report-border: 1px solid; // 全部边框
$case-report-highlight-text-color: #3AECFF; // 各种高亮文字颜色，包括label，选中的pager
$case-report-normal-text-color: white; // 报告页文字色
$case-report-notice-text-color: #FCAE3A; // 报告页提醒文字色，比如跳转提示按钮
$case-report-search-btn-bg-color: #3AECFF; // 搜索按钮背景色
$case-report-export-btn-bg-color: #2993FE; // 导出按钮背景色
$case-report-dialog-bg-color: linear-gradient(180deg, #112F2E 0%, #031E1D 100%); // dialog整体背景色
$case-report-dialog-divide-border: 1px solid rgba(164, 164, 164, 0.2); // dialog细分割线
$case-report-dialog-content-bg-color: #051818; // 内容背景色
$case-report-dialog-scroll-bar-color: #1D4241; // 滚动条颜色
$case-report-operate-log-bg-color-1: #275650; // 操作记录背景色1
$case-report-operate-log-bg-color-2: #336666; // 操作记录背景色2
$case-report-operate-log-bg-color-3: #0a6e8d; // 操作记录背景色3
$case-report-confirm-btn-bg-color: #3AECFF; // 确认按钮背景色
$case-report-confirm-btn-text-color: black; // 确认按钮文字色
$case-report-confirm-btn-border-color: #3AECFF; // 确认按钮边框色
$case-report-cancel-btn-bg-color: #112F2E; // 取消按钮背景色
$case-report-cancel-btn-text-color: #3AECFF; // 取消按钮文字色
$case-report-cancel-btn-border-color: #3AECFF; // 取消按钮边框色
